<template>
  <div class="table-container">
    <a-card
      style="width:100%"
      :tab-list="tabList"
      :active-tab-key="noTitleKey"
      @tabChange="key => onTabChange(key, 'noTitleKey')"
    >
      <p>
        <Table />
      </p>
    </a-card>
  </div>
</template>

<script>
import Table from './Table.vue'

export default {
  data () {
    return {
      tabList: [
        {
          key: 'tab1',
          tab: '01/2021',
        },
        {
          key: 'tab2',
          tab: '02/2021',
        },
          {
          key: 'tab3',
          tab: '03/2021',
        },
          {
          key: 'tab4',
          tab: '04/2021',
        },
          {
          key: 'tab5',
          tab: '05/2021',
        },
          {
          key: 'tab6',
          tab: '06/2021',
        },
          {
          key: 'tab7',
          tab: '07/2021',
        },
          {
          key: 'tab8',
          tab: '08/2021',
        },
          {
          key: 'tab9',
          tab: '09/2021',
        },
          {
          key: 'tab10',
          tab: '10/2021',
        },
        {
          key: 'tab11',
          tab: '11/2021',
        },
        {
          key: 'tab12',
          tab: '12/2021',
        },
      ],

      noTitleKey: 'app',
    }
  },

  components: {
    Table,
  },

  methods: {
    onTabChange (key, type) {
      console.log(key, type)
      this[type] = key
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
